<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>智慧工地管理平台</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
  </head>

  <body>
    <!-- header start -->
    <div class="header clearfix">
      <div class="left">
        <div class="logo"></div>
        <h3 class="slogan">南京市六合区智慧工地监管平台</h3>
      </div>
      <div class="right">
        <p class="info">2019年3月21日</p>
        <p class="info">星期四</p>
        <p class="info">温度：12℃</p>
        <p class="info">天气：晴</p>
      </div>
    </div>
    <!-- header end -->
    <div class="container">
      <!-- menu start -->
      <ul class="aside-menu">
        <li class="item">
          <span>视频监控</span>
        </li>
        <li class="item">
          <span>环保监测</span>
        </li>
        <li class="item">
          <span>车辆洗轮管理</span>
        </li>
        <li class="item">
          <span>实名制人员管理</span>
        </li>
        <li class="item">
          <span>塔吊监测</span>
        </li>
        <li class="item">
          <span>渣土车管理</span>
        </li>
        <li class="item">
          <span>其他</span>
        </li>
      </ul>
      <!-- menu end -->
      <!-- content start -->
      <div class="content no-bg">
        <div class="sct-title">
          <div class="inner">
            <span>监控管理</span>
          </div>
        </div>
        <div class="sct-panel">
          <!-- sct-table start -->
          <div class="sct-table sct-device">
            <!-- <div class="blank-top"></div> -->
            <ul class="sct-yctj">
              <li class="item" id='item1'></li>
              <li class="item" id='item2'></li>
              <li class="item" id='item3'></li>
              <li class="item" id='item4'></li>
            </ul>
          </div>
          <!-- sct-table end -->
        </div>
      </div>
      <!-- content end -->
    </div>
    <script src="./js/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="./js/echarts.min.js"></script>
    <script>
      // 绘制图表
      var option = {
          title: {
            text: '扬尘监测',
            x: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {},
          legend: {
            show: true,
            x: 'right',
            y: 'center',
            orient: 'vertical',
            align:'left',
            data: [
              {
                name:'PM10',
                icon:'circle'
              },
              {
                name:'PM2.5',
                icon:'circle',
                
              },{
                name:'噪声',
                icon:'circle',
                textStyle: {
                  color: "#f00"
                }
              }
            ]
          },
          xAxis: {
              data: ['1', '2', '3', '4', '5', '6'],
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              //设置网格线颜色
              splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          yAxis: {
            //设置坐标轴字体颜色和宽度
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            //设置网格线颜色
            splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
              axisLabel: {
                textStyle: {
                  color: '#f00',//坐标值得具体的颜色
                }
              }
          }]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('item1'));
      myChart.setOption(option);

      // 绘制图表
      var option = {
          title: {
            text: 'PM监测',
            x: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {},
          legend: {
            show: true,
            x: 'right',
            y: 'center',
            orient: 'vertical',
            align:'left',
            data: [
              {
                name:'PM10',
                icon:'circle'
              },
              {
                name:'PM2.5',
                icon:'circle',
                
              },{
                name:'噪声',
                icon:'circle',
                textStyle: {
                  color: "#f00"
                }
              }
            ]
          },
          xAxis: {
              data: ['1', '2', '3', '4', '5', '6'],
              axisLabel: {
                textStyle: {
                  color: '#fff',//坐标值得具体的颜色
                }
              },
              //设置网格线颜色
              splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // x轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          yAxis: {
            //设置坐标轴字体颜色和宽度
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            //设置网格线颜色
            splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          series: [{
              name: '销量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('item2'));
      myChart.setOption(option);
                    
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('item3'));
      myChart.setOption(option);

      
      // 绘制图表
      var option = {
        title: {
          text: 'PM监测',
          x: "center",
          textStyle: {
            color: "#fff"
            }
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        legend: {
          show: true,
          x: 'right',
          y: 'center',
          orient: 'vertical',
          align:'left',
          data: [
            {
              name:'PM10',
              icon:'circle'
            },
            {
              name:'PM2.5',
              icon:'circle',
              
            },{
              name:'噪声',
              icon:'circle',
              textStyle: {
                color: "#f00"
              }
            }
          ]
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: '完成率'}]
            }
        ]
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('item4'));
    setInterval(function () {
        option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        myChart.setOption(option, true);
    },2000);

      $(function() {
        $('.sct-root').on('click', '.item', function(event) {
          var $this = $(this);
          if ($this.hasClass('active')) {
            $this.removeClass('active');
          } else {
            $this.addClass('active');
          }
        });
        $('.sct-root').on('click', '.list', function(event) {
          return false;
        });
      });
    </script>
  </body>
</html>
